30天打造品牌特色電商網站 Day.16 微互動設計按鈕實作(2)

2021 iThome 鐵人賽

DAY 16

Modern Web

30天打造品牌特色電商網站系列第 16 篇

13th鐵人賽

atain880625

2021-09-30 21:10:11

634 瀏覽

分享至

按鈕在網站中可說是不可缺少的重要元件，今天就來學習<button>標籤的使用方法吧～

首先在HTML創建<button>標籤，<button>會建立一個可以點擊的按鈕，也可以依需求使用<div><a>標籤來製作，<button>使用上會直覺一點，這裡就簡單介紹一下！

type可以為<button>元素指定屬性，告訴瀏覽器它是什麼類型的按鈕

<button type="button">該按鈕是可以點擊的按鈕
<button type="submit"> 該按鈕式提交按鈕
<button type="reset"> 該按鈕是重置（清除）按鈕

<button type="button" class="button1"> Button </button>

再來用CSS修改掉預設的按鈕樣式，如果覺得CSS的樣式不滿意，也可以自己設計好按鈕的圖後用<background-image: url ('圖片網址');>丟進來喔！

.button1 {
  padding: 15px 32px;
  text-align: center; /* 文字置中*/
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  background-color: white;
  color: black;
  border: 2px solid #000; /* 外框樣式*/
  border-radius:25px; /***** 調整成圓角外框*/
}

可以新增一些滑鼠效果，增加網頁的互動性！

.button1:hover {
  background-color: #000;
  color: white;
  transition: all .3s linear;/* 添加過渡效果*/
}

大家可以用codepen去嘗試看看，做出想要的按鈕樣式，網頁中有許多需要使用到按鈕的地方，像是購物車、收藏、註冊會員等，添加一些微動畫可以讓頁面更加生動喔！

codepen查看範例樣式

這裡再分享一個進階一點的樣式，點擊後可以展開的按鈕。

HTML :

<body>
  <div class="BTN">
    <a class="button" href="#">
      <span>加入購物車</span>
    </a>
  </div>
</body>

CSS :

*{
  position:relative;
}
html,body{
  height:100%;
}
.BTN{
  height:100%;
  background-color:#000;
}
.button{
  color:#ffbb33;
  text-decoration:none;
  border:1px solid #ffbb33;
  background-color:#ffbb33;
  border-radius:28px;
  font-family:Roboto;
  display:inline-block;
  line-height:56px; 
  width:56px; 
  position:absolute;
  left:100px;
  top:50px;
  transition:all 0.3s;
}

.button:hover{
  padding:0 25px;
  background-color:#000;
  width:auto; /* 用字去撐開寬度*/
}

.button span{
  white-space: nowrap; /* 強制不換行*/
  opacity:0;
}

.button:after{ /* 創建偽元素*/
  content:"+";
  font-size:36px;
  line-height:50px;
  color:#000;
  position:absolute;
  left:18px;
  top:0;
}
.button:hover:after{
  opacity:0; /* 利用偽元素達到滑鼠效果*/
}
.button:hover span{
  opacity:1;/* 利用偽元素達到滑鼠效果*/
}

codepen查看範例樣式

這些基本上都是前面有提到CSS標籤，可以嘗試去看懂結構，就可以寫出屬於自己的獨特按鈕樣式了～那麼今天的按鈕就介紹到這裡了，明天會繼續跟大家分享其他網站元件的製作方法喔！